<template>
  <div class="hello">
    <heaDer></heaDer>
    <!-- <div style="width: 100%; background-color: black">
      <div
        style="
          height: 48px;
          display: flex;
          justify-content: space-between;
          color: #fff;
          align-items: center;
          width: 95%;
          margin: 0 auto;
        "
      >
        <router-link
          to="/index"
          tag="div"
          style="width: 0.8rem; margin-left: 10px; transform: rotate(180deg)"
          ><img src="../assets/img20.png" width="100%"
        /></router-link>
        <div>微信积分系统</div>
        <div style="width: 0.5rem; margin-left: 10px"></div>
      </div>
    </div> -->
    <!-- <div class="backmain">
      <div class="backAllhead">
        <div class="backimg">
          <div style="width: 30px" class="backliimg">
            <img :src="userinfo.usericon" width="100%" />
          </div>
          <div>{{ userNameInfo }}</div>
        </div>
        <div class="backimg">
          <div style="width: 20px">
            <img src="../assets/img5.png" width="100%" />
          </div>
          <div>
            积分<span style="color: orange">{{ userinfo.nowPoints }}</span>
          </div>
        </div>
      </div>
    </div> -->
    <div
      style="width: 50%; text-align: center; margin: 5% auto"
      v-show="xianshi"
    >
      <van-loading />
    </div>
    <div>
      <div class="navigation">
        <button
          class="navigation-colour"
          :class="{ liBackground: changeLeftBackground == item.id }"
          v-for="(item, index) in but_list"
          :key="index"
          @click="butName(item.id)"
        >
          {{ item.name }}
        </button>
      </div>
    </div>
    <div v-show="yincang">
      <div class="zwxximg">
        <img src="../assets/zwxx.png" alt="" />
      </div>
      <div class="zwxx">暂无数据</div>
    </div>
    <div v-for="(item, index) in partList" :key="index">
      <div
        style="
          border-bottom: 1px solid #ebebeb;
          display: flex;
          align-items: center;
          width: 90%;
          margin: 0 auto;
          padding: 20px 0;
        "
      >
        <div style="width: 70px"><img :src="item.image" width="100%" /></div>
        <div
          style="
            margin-left: 10px;
            font-size: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 100%;
          "
        >
          <div style="font-weight: 600">{{ item.title }}</div>
          <div
            style="
              display: flex;
              align-items: flex-end;
              justify-content: space-between;
            "
          >
            <div style="color: #c3c3c3; font-size: 12px">
              开始时间：{{ item.startTime }}
            </div>
            <div
              style="
                background-color: orange;
                color: #fff;
                padding: 4px 6px;
                border-radius: 14px;
                font-size: 14px;
              "
              v-if="item.state == 0"
              @click="campaign(item)"
            >
              立即报名
            </div>
            <div
              style="
                background-color: #aeaeae;
                color: #fff;
                padding: 4px 6px;
                border-radius: 14px;
                font-size: 14px;
              "
              v-if="item.state == 1"
              @click="campaign(item)"
            >
              活动结束
            </div>
            <div
              style="
                background-color: orange;
                color: #fff;
                padding: 4px 6px;
                border-radius: 14px;
                font-size: 14px;
                min-width: 68px;
                text-align: center;
              "
              v-if="item.state == 2"
              @click="campaign(item)"
            >
              已报名
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div style="border-bottom: 1px solid #ebebeb;display: flex;align-items: center;width: 90%;margin: 0 auto;padding: 20px 0;">
      <div style="width: 70px;"><img src="../assets/logo.png" width="100%"></div>
      <div style="width: 100%;margin-left: 10px;font-size: 15px;display: flex;flex-direction: column;justify-content: space-between;">
        <div>这个震撼中国的"女一号",值得刷爆热搜！</div>
        <div style="display: flex;align-items: flex-end;justify-content: space-between;">
          <div style="color: #c3c3c3;">开始时间：2021.10.12 15:00</div>
          <div style="background-color: orange;color: #fff;padding:4px 6px;border-radius: 14px;font-size: 14px;">立即报名</div>
        </div>
      </div>
    </div>
    <div style="border-bottom: 1px solid #ebebeb;display: flex;align-items: center;width: 90%;margin: 0 auto;padding: 20px 0;">
      <div style="width: 70px;"><img src="../assets/logo.png" width="100%"></div>
      <div style="width: 100%; margin-left: 10px;font-size: 15px;display: flex;flex-direction: column;justify-content: space-between;">
        <div>今日幸运签-Oct.11</div>
        <div style="display: flex;align-items: flex-end;justify-content: space-between;">
          <div style="color: #c3c3c3;">开始时间：2021.10.12 15:00</div>
          <div style="background-color: orange;color: #fff;padding:4px 6px;border-radius: 14px;font-size: 14px;">立即报名</div>
        </div>
      </div>
    </div>

    <div style="display: flex;align-items: center;width: 90%;margin: 0 auto;padding: 20px 0;border-bottom: 1px solid #ebebeb;">
      <div style="width: 70px;"><img src="../assets/logo.png" width="100%"></div>
      <div style="margin-left: 10px;font-size: 15px;display: flex;flex-direction: column;justify-content: space-between;">
        <div>台防务部门负责人称目前台海形势是40年来最为严峻时刻，国台办回应</div>
        <div style="display: flex;align-items: flex-end;justify-content: space-between;">
          <div style="color: #c3c3c3;">开始时间：2021.10.12 15:00</div>
          <div style="background-color: orange;color: #fff;padding:4px 6px;border-radius: 14px;font-size: 14px;">立即报名</div>
        </div>
      </div>
    </div>

    <div style="display: flex;align-items: center;width: 90%;margin: 0 auto;padding: 20px 0;border-bottom: 1px solid #ebebeb;">
      <div style="width: 70px;"><img src="../assets/logo.png" width="100%"></div>
      <div style="margin-left: 10px;font-size: 15px;display: flex;flex-direction: column;justify-content: space-between;">
        <div>台防务部门负责人称目前台海形势是40年来最为严峻时刻，国台办回应</div>
        <div style="display: flex;align-items: flex-end;justify-content: space-between;">
          <div style="color: #c3c3c3;">开始时间：2021.10.12 15:00</div>
          <div style="background-color: orange;color: #fff;padding:4px 6px;border-radius: 14px;font-size: 14px;">立即报名</div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import request from "@/utils/request";
import heaDer from "@/components/page/header/header.vue";
export default {
  name: "ActivityCenter",
  props: {
    msg: String,
  },
  components: {
    heaDer,
  },
  data() {
    return {
      xianshi: true,
      yincang: false,
      partList: [],
      but_list: [
        { id: 2, name: "全部" },
        { id: 0, name: "线上活动" },
        { id: 1, name: "线下活动" },
        { id: 3, name: "已报名" },
      ],
      changeLeftBackground: 2,
      userinfo: {},
      userNameInfo: "",
    };
  },
  created() {
    this.EndNUmpage();
    this.activeList();
    this.topHeader();
    // this.registerDay();
  },
  methods: {
    registerDay() {
      request({
        url: "/generator/user/front/register",
        method: "get",
      }).then((response) => {
        console.log(response.status);
        if (response.status == 0) {
          Toast({
            message: response.message,
            iconClass: "glyphicon glyphicon-ok",
          });
        }
      });
    },
    activeList() {
      console.log("在这里");
      let query = {
        type: this.changeLeftBackground,
      };
      request({
        url: "/generator/activity/front/list",
        method: "get",
        params: query,
      }).then((response) => {
        console.log(response.list.rows);
        this.partList = response.list.rows;
        console.log(this.partList, "12");
        this.xianshi = false;
        if (this.partList == "") {
          this.yincang = true;
        } else {
          this.yincang = false;
        }
      });
    },
    butName(row) {
      console.log("点击换色", row);
      this.changeLeftBackground = row;
      this.activeList();
      this.SnumPage();
    },
    campaign(row) {
      console.log(row.id);
      let userId = window.localStorage.getItem("userId");
      this.$router.push({
        name: "clockIn",
        query: { row: row.id, shareUserId: userId },
        params: { time: new Date().getTime() },
      });
    },
    topHeader() {
      request({
        url: "/generator/user/front/getinfo",
        method: "get",
      }).then((response) => {
        console.log(response.user);
        this.userinfo = response.user;
        if (response.user.truename != null) {
          this.userNameInfo = response.user.truename;
        } else {
          this.userNameInfo = response.user.username;
        }
      });
    },
    SnumPage() {
      const port = this.changeLeftBackground;
      localStorage.setItem("port", port);
    },
    EndNUmpage() {
      const localPort = localStorage.getItem("port");
      this.changeLeftBackground = localPort;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.navigation {
  padding: 15px;
  display: flex;
  justify-content: space-between;
      box-shadow: 0px 5px 15px -10px #B4B4B4;
}

.navigation button {
  width: 80px;
  height: 30px;
}

.navigation img {
  width: 20px;
  height: 20px;
}

.navigation-colour {
  /* background-color: #f1f1f0; */
  /* border: solid 1px #c3c3c3; */
  font-size: 15px;
  border-radius: 20px;
  border: none;
  background: none;
  /* box-shadow: 5px 10px 10px -5px #aaa; */
}
.liBackground {
  font-weight: 600;
  position: relative;
}
.liBackground::after{
    border: none;
    content: '';
    position: absolute;
left: 20px;
    top: 35px;
    bottom: 0;
    right: auto;
    height: 4px;
    width: 40px;
    border-radius: 5px;
    background-color: orange;
}
.img_all input {
  width: 0px;
}
.backmain {
  background-color: #f1f1f0;
  width: 100%;
  padding: 10px 0;
}
.backAllhead {
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 30px;
  margin: 0 auto;
}
.backimg {
  display: flex;
  align-items: center;
  /* border: 1px solid red; */
}
.backimg div {
  margin-right: 10px;
}
.zwxximg {
  widows: 100%;
  text-align: center;
}
.zwxx {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
</style>
